<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<%@ include file="/view/common/header.jsp"%> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>样板间管理</title>
		<script src="../js/ajaxfileupload.js"></script>

		<script type="text/javascript">
			//查询
			function search(){
				$('#dg').datagrid('load',{
					    id:   $("#id").val() ,
					    name:   $("#name").val() ,
					    styleId:   $("#styleId").val() ,
					    pic:   $("#pic").val() ,
					    models:   $("#models").val() ,
					    roomType:   $("#roomType").val() ,
				});
			}


			function openModifyDialog(title,url) {
				resetValue();
				var selectedRows=$("#dg").datagrid('getSelections');
				if(selectedRows.length!=1){
					$.messager.alert("系统提示","请选择一条要编辑的数据！");
					return;
				}
				var row=selectedRows[0];
				$("#dlg").dialog("open").dialog("setTitle", title);

				$('#fm').form('load',row);
				$("#picPreview").attr("src", row.pic);
				showmodelPic();
				window.submit_url  =  url ;
			}

			function uploadImage(id, preview) {
				$.ajaxFileUpload({
					url: root + '/file/uploadAnyFile.do',
					type: 'post',
					secureuri: false,             //一般设置为false
					fileElementId: id,    // 上传文件的id、name属性名
					dataType: 'json',             //返回值类型，一般设置为json、application/json
					success: function (res, status) {
						console.log(res);
						if (res.code == "0000") {
							console.log(res.data);
							console.log(preview);
							$("#" + preview).attr("src", res.data);
							$("#" + id + "_value").val(res.data);
						} else {
							alert(res.msg);
						}
					},
					error: function (data, status, e) {

					}
				});
			}

			function showmodelPic(){
				var ids = $("#sample_models").val();
				$("#fm #models-pic").empty();
				$.ajax({
					url:root + '/model/getPicByIdList.do',
					data:{ids:ids},
					success:function(res){
						if(res.data){
							for(var i=0;i<res.data.length;i++){
								var row =res.data[i];
								$("#fm #models-pic").append('<li><img src="' +row.canvasPic + '"></li>');
							}
						}
					}
				});
			}


			function closeDialog(){
				$("#dlg").dialog("close");
				$("#fm #models-pic").empty();
				resetValue();
			}

		</script>



		<style>
			li {
				border: green solid 1px;
				margin: 5px;
				padding: 5px;
			}
		</style>


	</head>
<body style="margin:1px;">
	<!-- 工具栏  -->
	<div id="tb">
		<div>
			<a href="javascript:openAddDialog('添加样板间 ' ,'../samplehouse/save.do')" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
			<a href="javascript:openModifyDialog('编辑样板间 ' ,'../samplehouse/save.do')" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="javascript:deleteById('../samplehouse/delete.do')" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
		</div>
		<div>
						
							&nbsp;名称：&nbsp;<input type="text" id="name" size="20"  class="easyui-textbox" />&nbsp;
						
							&nbsp;风格：&nbsp;<input type="text" id="styleId" size="20"  class="easyui-textbox" />&nbsp;
						

							&nbsp;模型：&nbsp;<input type="text" id="models" size="20"  class="easyui-textbox" />&nbsp;
						
							&nbsp;房屋类别：&nbsp;<input type="text" id="roomType" size="20"  class="easyui-textbox" />&nbsp;
						
			<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
		</div>
	</div>
	
	<!-- 查询表单 --> 
	<table id="dg" title="样板间管理" class="easyui-datagrid"  pagination="true" rownumbers="true"  fit="true"  url="../samplehouse/queryForPage.do"  toolbar="#tb">
		 <thead>
				<tr>
							<th data-options="field:'name',width:100" align="center">名称</th>
							<th data-options="field:'styleId',width:100" align="center">风格</th>
							<th data-options="field:'roomType',width:100" align="center">房屋类别</th>
							<th data-options="field:'pic',width:100" align="center">效果图</th>
							<th data-options="field:'models',width:100" align="center">模型</th>

				</tr>
		</thead>
	</table>
	
	
	<!-- 弹出对话框 -->
	<div id="dlg" class="easyui-dialog" style="width: 700px;height:420px;padding: 10px 20px" closed="true"
		 buttons="#dlg-buttons">
		<form id="fm" method="post" novalidate>
			<input   name="id" type="hidden"/>
			<div class="fitem">
				<label>名称:</label>
				<input name="name" class="easyui-textbox easyui-validatebox" data-options="required:true">
			</div>
			<div class="fitem">
				<label>房屋类别:</label>
				<select id="roomType" name="roomType">
					<option value="厨房"> 厨房 </option>
					<option value="客厅"> 客厅 </option>
					<option value="餐厅"> 餐厅</option>
					<option value="主卧"> 主卧</option>
					<option value="次卧"> 次卧</option>
					<option value="阳台"> 阳台</option>
					<option value="生活阳台"> 生活阳台</option>
					<option value="储物间"> 储物间</option>
					<option value="卫生间"> 卫生间</option>
					<option value="其它"> 其它</option>
				</select>
			</div>
			<div class="fitem">
				<label>风格:</label>
				<select id="styleId" name="styleId">
					<option value="中式"> 中式 </option>
					<option value="日式"> 日式 </option>
					<option value="东南亚"> 东南亚</option>
					<option value="欧式"> 欧式</option>
					<option value="法式"> 法式</option>
					<option value="地中海"> 地中海</option>
					<option value="新古典"> 新古典</option>
					<option value="现代简约"> 现代简约</option>
					<option value="乡村田园"> 乡村田园</option>
					<option value="其它"> 其它</option>
				</select>
			</div>
			<div class="fitem">
				<label>样板间图片:</label>
				<input name="files" id="pic" type="file"/>
				<input id="pic_value" name="pic" type="hidden"/>
				<input type="button" value="上传文件" onclick="uploadImage('pic','picPreview');"></input>
			</div>
			<div class="fitem">
				<label>预览图片:</label>
				<img height="400" width="400" id="picPreview" src=""/>
			</div>

			<div class="fitem">
				<label>模型:</label>
				<input name="models" id="sample_models" style="width: 300px">
				<input type="button" value="显示模型图片" onclick="showmodelPic();"></input>
				<ul id="models-pic">

				</ul>
			</div>

		</form>
	</div>
	
	

	<!-- 保存和关闭按钮 -->
	<div id="dlg-buttons">
		<a href="javascript:save()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
		<a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
	</div>
	
</body>
</html>